import React, {useRef, useState} from "react"
import {View, Image, Text} from "@tarojs/components"
import GridLayer, {GridLayerItem} from '@/components/GridLayer/GridLayer'
import shirt from '@/assets/images/fcht/shirt.png'
import foot from '@/assets/images/fcht/foot.png'
import hotel from '@/assets/images/fcht/hotel.png'
import travel from '@/assets/images/fcht/travel.png'
import BgImage from '@/components/BgImage/BgImage'
import Taro, {useReady} from '@tarojs/taro'
import {UserInfo} from '@/type'
import "./Index.scss"

// @ts-ignore
const grid: GridLayerItem[] = [{iconfont: shirt,}, {iconfont: foot,}, {iconfont: hotel,}, {iconfont: travel,}]

const lists = [
  {
    content: '可能认识',
    iconfont: 'icon-renshu'
  }, {
    content: '添加好友',
    iconfont: 'icon-tianjiajiahaoyoutianjiapengyou'
  }, {
    content: '优惠劵',
    iconfont: 'icon-youhuiquan1'
  }, {
    content: '愿望清单',
    iconfont: 'icon-shoucangxinyuandanyuanwangqingdantuijian'
  }, {
    content: '设置',
    iconfont: 'icon-icon_setting'
  }
]

const Index: React.FC = () => {
  const imageUrl = useRef('https://img1.baidu.com/it/u=598725058,1888376806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281')
  const [userInfo, setUserInfo] = useState<UserInfo>()

  useReady(() => {
    let info = Taro.getStorageSync('userInfo')
    setUserInfo(info)
  })

  return <>
    <BgImage url={imageUrl.current} />
    <View className='container'>
      <View className='popup_wrap'>
        <Image className='avatar' src={userInfo?.avatarUrl || ''} />
        <Text className='username'>{userInfo?.nickName}</Text>
        <Text className='phone'>未知电话</Text>
        <View className='userinfo'>
          <View className='userinfo_box'>
            <Text className='userinfo_box_num'>56</Text>
            <Text className='userinfo_box_text'>关注</Text>
          </View>
          <View className='userinfo_box'>
            <Text className='userinfo_box_num'>9875</Text>
            <Text className='userinfo_box_text'>粉丝</Text>
          </View>
          <View className='userinfo_box'>
            <Text className='userinfo_box_num'>6</Text>
            <Text className='userinfo_box_text'>喜欢</Text>
          </View>
        </View>
      </View>
      <GridLayer grids={grid} onclick={()=>{}} />
      <View className='lists'>
        {
          lists.map(list => <View className='lists_item' key={list.iconfont}>
            <Text className={`iconfont ${list.iconfont}`} />
            <Text className='lists_item_content'>{list.content}</Text>
          </View>)
        }
      </View>
    </View>
  </>
}

export default Index
